import { Button, Card, Checkbox, Form, Input, Space, Tooltip, Table, message, Popconfirm } from "antd";
import React, { useEffect, useState } from "react";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import  { ColumnsType } from "antd/lib/table";
import { reqBatchRemoveHospitalSet, reqGetHospitalSet, reqRemoveHospitalSet } from "@/api/hospital/hospitalSet/hospitalSet";
import { HospitalSetItem, HospitalSetItems } from "@/api/hospital/hospitalSet/model/hospitalSetTypes";
import { Link, useNavigate } from "react-router-dom";
import { log } from "console";

export default function HospitalSet() {
  //准备列结构数据
  const columns: ColumnsType<any> = [
    {
      title: "序号",
      dataIndex: "id",
      // value 是 dataIndex 对应的属性值
      // row 是当前行的对象值
      // index 为当前对象在数组中的下标
      render: (value, row, index) => {
        return index + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "API基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机号",
      dataIndex: "contactsPhone",
    },
    {
      fixed: "right",
      width: 120,
      title: "操作",
      //render 渲染,  作用: 自定义渲染
      render: (value, row, index) => {
        return (
          <Space>
            <Tooltip title="修改医院">
              <Link to={`/syt/hospital/hospitalSet/edit/${row.id}`}><Button icon={<EditOutlined />} type="primary"></Button></Link>
            </Tooltip>
            <Popconfirm
              title='您确定要删除该条数据么'
              okText='是'
              cancelText='否'
              onConfirm={async () => {
                //发送请求 
                await reqRemoveHospitalSet(row.id);
                //提示
                message.success('删除成功'); 
                //重新发送请求 获取数据并渲染
                let fields = form.getFieldsValue();
                setFields(fields)
              }}
              >
            <Button icon={<DeleteOutlined />} type="primary" danger></Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  //声明与分页相关的状态
  let [current, setCurrent] = useState<number>(1);
  let [total, setTotal] = useState<number>(10);
  let [pageSize, setPageSize] = useState<number>(5);
  let [hospitalSet, setHospitalSet] = useState<HospitalSetItems>([]);
  let [loading, setLoading] = useState<boolean>(false);
  let [fields, setFields] = useState({hosname: '', hoscode: ''});
  //选中行的 id 状态
  let [ids, setIds] = useState<number[]>([]);
  //获取跳转的函数
  let navigate = useNavigate();
  //发送请求  
  useEffect(() => {
    //发送请求
    let getHospital = async () => {
      //发送请求
      //设置正在加载中..
      setLoading(true);
      //发送请求
      let result = await reqGetHospitalSet({page: current, limit: pageSize, ...fields});
      //更新状态
      setHospitalSet(result.records);
      //更新总数
      setTotal(result.total);
      //设置未在加载中..
      setLoading(false);
    }

    getHospital();
  }, [current, pageSize, fields]);
  
  //1. 创建 form 对象
  let [form] = Form.useForm();

  //声明事件回调
  let finish = async () => {
    //3. 获取表单元素的值
    let newFields = form.getFieldsValue();// {hosname: 'xx', hoscode: 'xxx'}
    if(!(newFields.hosname === fields.hosname && newFields.hoscode === fields.hoscode)){
      //更新状态
      setFields(newFields);
    }
  }

  return (
    <Card>
      {/* 表单部分 */}
      {/* 2. 设置属性 */}
      <Form form={form} layout="inline" onFinish={finish}>
        <Form.Item
          name="hosname"
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          name="hoscode"
        >
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button htmlType="reset">清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <div className="h-20"></div>
      {/* 操作按钮 */}
      <Space>
        <Button type="primary" onClick={() => navigate('/syt/hospital/hospitalSet/add')}>添加</Button>
        <Button disabled={ids.length === 0} onClick={async () => {
          //发送请求
          await reqBatchRemoveHospitalSet(ids);
          //提示
          message.success('删除成功');
          //重新渲染操作
          setFields(form.getFieldsValue());
          //清空选中 id 的状态
          setIds([]);
        }}>批量删除</Button>
      </Space>
      <div className="h-20"></div>
      {/* 表格结构 */}
      <Table 
        loading={loading}
        //表格列结构
        columns={columns} 
        //表格行数据
        dataSource={hospitalSet} 
        //添加边框
        bordered
        //设置水平的滚动宽度
        scroll={{
          x: 1300
        }}
        //设置 key
        rowKey='id'
        pagination={{
          showSizeChanger: true,//显示每页数量的控制器
          current: current, //当前的页码数
          total: total, //总的数量
          pageSize: pageSize, //每页显示的数量
          onChange: (page: number, pageSize: number) => {
            //更新状态
            setCurrent(page);
            setPageSize(pageSize);
            //发送请求

          },
          pageSizeOptions: [2,3,5,10]
        }}
        //设置表格行可选
        rowSelection={{
          type: 'checkbox',
          onChange: (selectedRowKeys, selectedRows) => {
            setIds(selectedRowKeys as number[]);
          } 
        }}
        />
    </Card>
  );
}
